<template>
	<view class=" beijingse">
		<view class="mainpadding" style="padding-bottom: 150rpx;">
			<!-- 没有存在地址 -->
			<view class="ffffff dingwei mainpadding flexcenter" style="height:140rpx;" v-if="dataAllqrdd.addressData==null"
				@click="jumpurl('/pages_mypage/shouhuodiz?type=1')">
				<view class="margin_right2">
					<u-icon name="plus-circle-fill" color="#ba9549" size="28"></u-icon>
				</view>
				<view class="ershiba xiaohei">新增收货地址</view>
				<image style="height: 6rpx;width: 100%;position: absolute;bottom: 0;left: 0;"
					src="../static/image/system/xhx.png" mode=""></image>
			</view>
			<!-- 有地址 -->
			<view class="ffffff mainpadding dingwei" @click="jumpurl('/pages_mypage/shouhuodiz?type=1')" v-else>
				<view class="ershiba xiaohei">{{dataAllqrdd.addressData.cityinfo}}{{dataAllqrdd.addressData.address_detail}}
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft">
						<view class="mrbtn margin_right1 textcenter" v-show="dataAllqrdd.addressData.status==1">默认</view>
						<view class="ershil xiaohui">{{dataAllqrdd.addressData.name}} {{dataAllqrdd.addressData.mobile}}</view>
					</view>
					<image style="width: 26rpx;height: 26rpx;" src="../static/image/system/bj.png" mode=""></image>
				</view>
				<image style="height: 6rpx;width: 100%;position: absolute;bottom: 0;left: 0;"
					src="../static/image/system/xhx.png" mode=""></image>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="flextop xiahuaxian">
					<image style="width: 168rpx;height: 168rpx;" :src="dataAllqrdd.goodsinfo.image_text" mode=""></image>
					<view class="flexcolumn" style="width: 71%;justify-content: space-between;align-items: flex-start;height: 168rpx;">
						<view class="ershiba xiaohei yhxk">{{dataAllqrdd.goodsinfo.name}}</view>
						<view class="ershiba xiaohei margin_top6 fonweight">￥{{dataAllqrdd.goodsinfo.curr_price}}</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">您的出价</view>
					<view class="ershil xiaohong fonweight">￥{{dataAllqrdd.goodsinfo.curr_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">快递费用</view>
					<view class="ershil xiaohei">到付</view>
				</view>
				<view class="flexbetween margin_top" @click="checkIstrue(1)">
					<view class="ershil xiaohei">是否空运</view>
					<view class="flexright">
						<view class="ershil xiaohei margin_right1">{{is_ky==1?"是":"否"}}</view>
						<u-icon name="arrow-right" color="#333" size="14"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="checkIstrue(2)">
					<view class="ershil xiaohei">是否需要抛光服务（￥{{dataAllqrdd.statis.pgfw_price}}）</view>
					<view class="flexright">
						<view class="ershil xiaohei margin_right1">{{is_pgfw==1?"是":"否"}}</view>
						<u-icon name="arrow-right" color="#333" size="14"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="checkIstrue(3)">
					<view class="ershil xiaohei">是否需要翻新（￥{{dataAllqrdd.statis.fx_price}}）</view>
					<view class="flexright">
						<view class="ershil xiaohei margin_right1">{{is_fx==1?"是":"否"}}</view>
						<u-icon name="arrow-right" color="#333" size="14"></u-icon>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="checkIstrue(4)">
					<view class="ershil xiaohei">是否需要瑕疵处理（{{dataAllqrdd.statis.xccl_price}}）</view>
					<view class="flexright">
						<view class="ershil xiaohei margin_right1">{{is_xccl==1?"是":"否"}}</view>
						<u-icon name="arrow-right" color="#333" size="14"></u-icon>
					</view>
				</view>
				<input class="input margin_top" placeholder="请输入预留微信号" type="text" v-model="wechat_code" />
			</view>
			<!-- 支付方式 -->
			<view class="mainpadding ffffff margin_top" v-if="dataAllqrdd.payinfo.wechatinfo || dataAllqrdd.payinfo.bankinfo || dataAllqrdd.payinfo.aliinfo">
				<view class="sanshier xiaohei fonweight">打款方式</view>
				<view class="xiahuaxian margin_top flexbetween" v-if="dataAllqrdd.payinfo.wechatinfo" @click="pay_type=1">
					<view class="flextops">
						<view class="margin_right1">
							<u-icon class="" name="weixin-circle-fill" color="#50b674" size="28"></u-icon>
						</view>
						<view class="">
							<view class="ershil xiaohei">微信</view>
							<view class="flexleft margin_top2">
								<view class="smalltext margin_right0" style="color: #555555;">收款信息：</view>
								<view class="smalltext margin_right0" style="color: #555555;">
									{{dataAllqrdd.payinfo.wechatinfo.name}}</view>
								<view class="smalltext" style="color: #555555;">{{dataAllqrdd.payinfo.wechatinfo.account}}
								</view>
							</view>
						</view>
					</view>
					<u-icon class="" v-if="pay_type==1" name="checkmark-circle-fill" color="#ba9549" size="22"></u-icon>
					<view class="weixz" v-else></view>
				</view>
				<view class="xiahuaxian margin_top flexbetween" v-if="dataAllqrdd.payinfo.aliinfo" @click="pay_type=2">
					<view class="flextops">
						<view class="margin_right1">
							<u-icon class="" name="zhifubao-circle-fill" color="#1296DB" size="28"></u-icon>
						</view>
						<view class="">
							<view class="ershil xiaohei">支付宝</view>
							<view class="flexleft margin_top2">
								<view class="smalltext margin_right0" style="color: #555555;">收款信息：</view>
								<view class="smalltext margin_right0" style="color: #555555;">
									{{dataAllqrdd.payinfo.aliinfo.name}}</view>
								<view class="smalltext" style="color: #555555;">{{dataAllqrdd.payinfo.aliinfo.account}}
								</view>
							</view>
						</view>
					</view>
					<u-icon class="" v-if="pay_type==2" name="checkmark-circle-fill" color="#ba9549" size="22"></u-icon>
					<view class="weixz" v-else></view>
				</view>

				<view class="margin_top flexbetween" v-if="dataAllqrdd.payinfo.bankinfo" @click="pay_type=3">
					<view class="flextops">
						<view class="margin_right1">
							<image style="width: 52rpx;height: 52rpx;" src="../static/image/system/yhk.png" mode="">
							</image>
						</view>
						<view class="">
							<view class="ershil xiaohei">银行卡支付</view>
							<view class="flexleft margin_top2">
								<view class="smalltext margin_right0" style="color: #555555;">
									{{dataAllqrdd.payinfo.bankinfo.name}}</view>
								<view class="smalltext" style="color: #555555;">{{dataAllqrdd.payinfo.bankinfo.openbank}}
									{{dataAllqrdd.payinfo.bankinfo.account}}</view>
							</view>
						</view>
					</view>
					<u-icon class="" v-if="pay_type==3" name="checkmark-circle-fill" color="#ba9549" size="22"></u-icon>
					<view class="weixz" v-else></view>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top" v-if="dataAllqrdd.payinfo.wechatinfo==null && dataAllqrdd.payinfo.bankinfo==null && dataAllqrdd.payinfo.aliinfo==null">
				<view class="sanshier xiaohei fonweight">打款方式</view>
				<view class="xiahuaxian margin_top flexbetween" v-if="dataAllqrdd.shopinfo.wechat_account" @click="pay_type=1">
					<view class="flextops">
						<view class="margin_right1">
							<u-icon class="" name="weixin-circle-fill" color="#50b674" size="28"></u-icon>
						</view>
						<view class="">
							<view class="ershil xiaohei">微信</view>
							<view class="flexleft margin_top2">
								<view class="smalltext margin_right0" style="color: #555555;">收款信息：</view>
								
								<view class="smalltext" style="color: #555555;">{{dataAllqrdd.shopinfo.wechat_account}}
								</view>
							</view>
						</view>
					</view>
					<u-icon class="" v-if="pay_type==1" name="checkmark-circle-fill" color="#ba9549" size="22"></u-icon>
					<view class="weixz" v-else></view>
				</view>
				<view class="xiahuaxian margin_top flexbetween" v-if="dataAllqrdd.shopinfo.ali_account" @click="pay_type=2">
					<view class="flextops">
						<view class="margin_right1">
							<u-icon class="" name="zhifubao-circle-fill" color="#1296DB" size="28"></u-icon>
						</view>
						<view class="">
							<view class="ershil xiaohei">支付宝</view>
							<view class="flexleft margin_top2">
								<view class="smalltext margin_right0" style="color: #555555;">收款信息：</view>
								
								<view class="smalltext" style="color: #555555;">{{dataAllqrdd.shopinfo.ali_account}}
								</view>
							</view>
						</view>
					</view>
					<u-icon class="" v-if="pay_type==2" name="checkmark-circle-fill" color="#ba9549" size="22"></u-icon>
					<view class="weixz" v-else></view>
				</view>
			
				<view class="margin_top flexbetween" v-if="dataAllqrdd.shopinfo.bankno" @click="pay_type=3">
					<view class="flextops">
						<view class="margin_right1">
							<image style="width: 52rpx;height: 52rpx;" src="../static/image/system/yhk.png" mode="">
							</image>
						</view>
						<view class="">
							<view class="ershil xiaohei">银行卡支付</view>
							<view class="flexleft margin_top2">
								<view class="smalltext margin_right0" style="color: #555555;">
									{{dataAllqrdd.shopinfo.bank_name}}</view>
								<view class="smalltext" style="color: #555555;">{{dataAllqrdd.shopinfo.openbank}}
									{{dataAllqrdd.shopinfo.bankno}}</view>
							</view>
						</view>
					</view>
					<u-icon class="" v-if="pay_type==3" name="checkmark-circle-fill" color="#ba9549" size="22"></u-icon>
					<view class="weixz" v-else></view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding flexbetween">
			<view class="smalltext xiaohei">需支付
				<text class="titletext xiaohong fonweight">￥{{dataAllqrdd.statis.pay_price}}</text>
			</view>
			<view class="dqbtn flexcenter" @click="submit()">提交订单</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				goods_id: "",
				address_id: "",
				is_ky: 1,
				is_pgfw: 1,
				is_fx: 1,
				is_xccl: 1,
				dataAllqrdd: {},
				// 支付方式:1=微信,2=支付宝,3=银行卡
				pay_type: 1,
				wechat_code: "",
			}
		},
		onLoad(options) {
			uni.$on("checkAddressId", data => {
				this.address_id = data
			})
			this.goods_id = options.id
		},
		onShow() {
			this.init()
		},
		onUnload() {
			uni.$off("checkAddressId")
		},
		watch: {
			is_ky(newval) {
				this.init()
			},
			is_pgfw(newval) {
				this.init()
			},
			is_fx(newval) {
				this.init()
			},
			is_xccl(newval) {
				this.init()
			},
		},
		methods: {
			checkIstrue(val){
				let that = this
				uni.showActionSheet({
					itemList: ['否', "是"],
					success: function(res) {
						if(val==1) that.is_ky = res.tapIndex
						if(val==2) that.is_pgfw = res.tapIndex
						if(val==3) that.is_fx = res.tapIndex
						if(val==4) that.is_xccl = res.tapIndex
					}
				});
			},
			init() {
				httpRequest.request('/api/ordercl/getOrderGoodsList', 'POST', {
					address_id: this.address_id,
					goods_id: this.goods_id,
					is_ky: this.is_ky,
					is_pgfw: this.is_pgfw,
					is_fx: this.is_fx,
					is_xccl: this.is_xccl,
				}).then(res => {
					this.dataAllqrdd = res.data
					if (res.data.addressData) {
						this.address_id = res.data.addressData.id
					}
					if (res.data.payinfo.bankinfo) {
						this.pay_type = 3
					}
					if (res.data.payinfo.aliinfo) {
						this.pay_type = 2
					}
					if (res.data.payinfo.wechatinfo) {
						this.pay_type = 1
					}
				})
			},
			submit() {
				if (this.address_id == "") {
					httpRequest.toast("请选择收货地址")
					return false
				}
				if (this.wechat_code == "") {
					httpRequest.toast("请输入您的微信号")
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/ordercl/addOrder', 'POST', {
					address_id: this.address_id,
					goods_id: this.goods_id,
					is_ky: this.is_ky,
					is_pgfw: this.is_pgfw,
					is_fx: this.is_fx,
					is_xccl: this.is_xccl,
					wechat_code: this.wechat_code,
					pay_type: this.pay_type,
				}).then(res => {
					if (res.code == 1) {
						this.pay(res.data.order_id)
					}else{
						uni.hideLoading()
						httpRequest.toast(res.msg)
					}
				})
			},
			pay(order_id){
				httpRequest.request('/api/ordercl/payment', 'POST', {
					order_id
				}).then(res => {
					let data = res.data.wxconfig
					uni.hideLoading()
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								// 支付成功
								uni.navigateBack(1)
							},
							fail: function(err) {
								// 取消支付
								uni.navigateBack(1)
							}
						});
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			// 上传支付凭证
			tzsczfpz() {
				uni.navigateTo({
					url: '/pages_paimai/shangczfpz'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dqbtn {
		width: 340rpx;
		height: 90rpx;
		background: #BA9549;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.input {
		background: #F5F5F5;
		padding: 20rpx 30rpx;
	}

	.mrbtn {
		width: 60rpx;
		height: 30rpx;
		background: #ffeceb;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #DB2E2E;
	}
</style>